{% extends "admin/base.html" %}

{% block title %}教练管理 - 管理后台 - 万岛潜水{% endblock %}

{% block page_title %}教练管理{% endblock %}

{% block page_actions %}
<button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addCoachModal">
    <i class="fas fa-plus me-1"></i> 添加教练
</button>
{% endblock %}

{% block content %}
<div class="card">
    <div class="card-body">
        <div class="row mb-3">
            <div class="col-md-6">
                <form method="get" action="{{ url_for('main.admin_coaches') }}" class="d-flex">
                    <input type="text" name="search" class="form-control me-2" placeholder="搜索教练姓名" value="{{ request.args.get('search', '') }}">
                    <button type="submit" class="btn btn-outline-primary">搜索</button>
                </form>
            </div>
            <div class="col-md-6 text-end">
                <div class="btn-group">
                    <a href="{{ url_for('main.admin_coaches', filter='all') }}" class="btn btn-outline-secondary {% if request.args.get('filter') == 'all' or not request.args.get('filter') %}active{% endif %}">全部</a>
                    <a href="{{ url_for('main.admin_coaches', filter='available') }}" class="btn btn-outline-secondary {% if request.args.get('filter') == 'available' %}active{% endif %}">可预约</a>
                    <a href="{{ url_for('main.admin_coaches', filter='unavailable') }}" class="btn btn-outline-secondary {% if request.args.get('filter') == 'unavailable' %}active{% endif %}">不可预约</a>
                </div>
            </div>
        </div>
        
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>照片</th>
                        <th>姓名</th>
                        <th>专长</th>
                        <th>经验</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for coach in coaches %}
                    <tr data-detail-url="{{ url_for('main.coach_detail', id=coach.id) }}">
                        <td>{{ coach.id }}</td>
                        <td>
                            <img src="{{ url_for('static', filename='uploads/' + coach.photo) }}" alt="{{ coach.name }}" class="rounded-circle" style="width: 60px; height: 60px; object-fit: cover;">
                        </td>
                        <td>{{ coach.name }}</td>
                        <td>{{ coach.specialty }}</td>
                        <td>{{ coach.experience }}年</td>
                        <td>
                            {% if coach.availability %}
                            <span class="badge bg-success">可预约</span>
                            {% else %}
                            <span class="badge bg-secondary">不可预约</span>
                            {% endif %}
                        </td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#editCoachModal{{ coach.id }}">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button type="button" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#deleteCoachModal{{ coach.id }}">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                            
                            <!-- 编辑教练模态框 -->
                            <div class="modal fade" id="editCoachModal{{ coach.id }}" tabindex="-1" aria-labelledby="editCoachModalLabel{{ coach.id }}" aria-hidden="true">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content">
                                        <form method="post" action="{{ url_for('main.admin_edit_coach', id=coach.id) }}" enctype="multipart/form-data">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="editCoachModalLabel{{ coach.id }}">编辑教练</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                                            <label for="name{{ coach.id }}" class="form-label">姓名</label>
                                                            <input type="text" class="form-control" id="name{{ coach.id }}" name="name" value="{{ coach.name }}" required>
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="specialty{{ coach.id }}" class="form-label">专长</label>
                                                            <input type="text" class="form-control" id="specialty{{ coach.id }}" name="specialty" value="{{ coach.specialty }}" required>
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="experience{{ coach.id }}" class="form-label">经验年数</label>
                                                            <input type="number" class="form-control" id="experience{{ coach.id }}" name="experience" value="{{ coach.experience }}" min="0" required>
                                                        </div>
                                                        <div class="mb-3 form-check">
                                                            <input type="checkbox" class="form-check-input" id="availability{{ coach.id }}" name="availability" {% if coach.availability %}checked{% endif %}>
                                                            <label class="form-check-label" for="availability{{ coach.id }}">可预约</label>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                                            <label for="photo{{ coach.id }}" class="form-label">照片</label>
                                                            <input type="file" class="form-control" id="photo{{ coach.id }}" name="photo" accept="image/*">
                                                            <div class="form-text">留空表示不修改照片</div>
                                                            <div class="mt-2">
                                                                <img src="{{ url_for('static', filename='uploads/' + coach.photo) }}" alt="{{ coach.name }}" class="img-thumbnail" style="max-height: 150px;">
                                                            </div>
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="introduction{{ coach.id }}" class="form-label">个人介绍</label>
                                                            <textarea class="form-control" id="introduction{{ coach.id }}" name="introduction" rows="7" required>{{ coach.introduction }}</textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                                <button type="submit" class="btn btn-primary">保存</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 删除教练确认模态框 -->
                            <div class="modal fade" id="deleteCoachModal{{ coach.id }}" tabindex="-1" aria-labelledby="deleteCoachModalLabel{{ coach.id }}" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="deleteCoachModalLabel{{ coach.id }}">确认删除</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <p>您确定要删除教练 "{{ coach.name }}" 吗？此操作不可撤销。</p>
                                            <p class="text-danger">注意：删除教练将同时删除与该教练相关的所有预约记录。</p>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                            <a href="{{ url_for('main.admin_delete_coach', id=coach.id) }}" class="btn btn-danger">删除</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        
        <!-- 分页 -->
        <nav aria-label="Page navigation">
            <ul class="pagination justify-content-center">
                {% if pagination.has_prev %}
                <li class="page-item">
                    <a class="page-link" href="{{ url_for('main.admin_coaches', page=pagination.prev_num, search=request.args.get('search', ''), filter=request.args.get('filter', '')) }}">上一页</a>
                </li>
                {% else %}
                <li class="page-item disabled">
                    <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                </li>
                {% endif %}
                
                {% for page in pagination.iter_pages() %}
                    {% if page %}
                        {% if page != pagination.page %}
                        <li class="page-item">
                            <a class="page-link" href="{{ url_for('main.admin_coaches', page=page, search=request.args.get('search', ''), filter=request.args.get('filter', '')) }}">{{ page }}</a>
                        </li>
                        {% else %}
                        <li class="page-item active" aria-current="page">
                            <span class="page-link">{{ page }}</span>
                        </li>
                        {% endif %}
                    {% else %}
                        <li class="page-item disabled">
                            <a class="page-link" href="#">...</a>
                        </li>
                    {% endif %}
                {% endfor %}
                
                {% if pagination.has_next %}
                <li class="page-item">
                    <a class="page-link" href="{{ url_for('main.admin_coaches', page=pagination.next_num, search=request.args.get('search', ''), filter=request.args.get('filter', '')) }}">下一页</a>
                </li>
                {% else %}
                <li class="page-item disabled">
                    <a class="page-link" href="#" tabindex="-1" aria-disabled="true">下一页</a>
                </li>
                {% endif %}
            </ul>
        </nav>
    </div>
</div>

<!-- 添加教练模态框 -->
<div class="modal fade" id="addCoachModal" tabindex="-1" aria-labelledby="addCoachModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form method="post" action="{{ url_for('main.admin_add_coach') }}" enctype="multipart/form-data">
                <div class="modal-header">
                    <h5 class="modal-title" id="addCoachModalLabel">添加教练</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="name" class="form-label">姓名</label>
                                <input type="text" class="form-control" id="name" name="name" required>
                            </div>
                            <div class="mb-3">
                                <label for="specialty" class="form-label">专长</label>
                                <input type="text" class="form-control" id="specialty" name="specialty" required>
                            </div>
                            <div class="mb-3">
                                <label for="experience" class="form-label">经验年数</label>
                                <input type="number" class="form-control" id="experience" name="experience" min="0" required>
                            </div>
                            <div class="mb-3 form-check">
                                <input type="checkbox" class="form-check-input" id="availability" name="availability" checked>
                                <label class="form-check-label" for="availability">可预约</label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="photo" class="form-label">照片</label>
                                <input type="file" class="form-control" id="photo" name="photo" accept="image/*" required>
                            </div>
                            <div class="mb-3">
                                <label for="introduction" class="form-label">个人介绍</label>
                                <textarea class="form-control" id="introduction" name="introduction" rows="10" required></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">添加</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %} 